<template>
  <div class="waybillDetails tab-fixed">
    <el-tabs v-model="activeName" lazy>
      <el-tab-pane label="运单详情" name="first">
        <div class="padding">
          <!-- 订单状态 -->
          <ProgressBar v-if="progress.length > 0" :progress-list="progress" />

          <el-row class="margin-top" :gutter="10" type="flex">
            <el-col :span="width">
              <el-card class="flex-card">
                <div slot="header" class="clearfix">
                  <span class="title-icon">合单基本信息</span>
                </div>
                <div class="hd-info-text">
                  <el-row>
                    <el-col :span="8">目的国家：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.countryId
                        ? publicData.countryMap[waybillInfo.waybill.countryId]
                        : ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">渠道：</el-col>
                    <el-col :span="16">
                      <template v-if="waybillInfo.waybill.palceOrderWay === 0"
                        >清关+派送</template
                      >
                      <template v-if="waybillInfo.waybill.palceOrderWay === 1"
                        >清关</template
                      >
                      <template v-if="waybillInfo.waybill.palceOrderWay === 2"
                        >快递派送</template
                      >
                      <template v-if="waybillInfo.waybill.palceOrderWay === 3"
                        >卡车派送</template
                      >
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">主单号：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.masterNumber || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">参考号：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.referenceNo || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">总实重(KG)：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.customerActualWeight || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">体积(CBM)：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.customerVolume || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">计费重：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.customerChargedWeight || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">件数：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.customerTotalPackages || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">目的仓库类型：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.purposeWarehouseType
                        ? publicData.stockTypeMap[
                            waybillInfo.waybill.purposeWarehouseType
                          ]
                        : ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">预计离港时间：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.estimatedDepartureTime || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">预计到港时间：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.estimatedArrivalTime || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">起运港：</el-col>
                    <el-col :span="16">
                      <template
                        v-if="isAir && waybillInfo.waybill.shipmentPort"
                      >
                        {{
                          publicData.airPortMap[
                            waybillInfo.waybill.shipmentPort
                          ]
                        }}
                      </template>
                      <template
                        v-if="!isAir && waybillInfo.waybill.shipmentPort"
                      >
                        {{
                          publicData.portMap[waybillInfo.waybill.shipmentPort]
                        }}
                      </template>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">目的港：</el-col>
                    <el-col :span="16">
                      <template
                        v-if="isAir && waybillInfo.waybill.destinationPort"
                      >
                        {{
                          publicData.airPortMap[
                            waybillInfo.waybill.destinationPort
                          ]
                        }}
                      </template>
                      <template
                        v-if="!isAir && waybillInfo.waybill.destinationPort"
                      >
                        {{
                          publicData.portMap[
                            waybillInfo.waybill.destinationPort
                          ]
                        }}
                      </template>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
            <el-col :span="width">
              <el-card class="flex-card">
                <div slot="header" class="clearfix">
                  <span class="title-icon">合单派送信息</span>
                </div>
                <div class="hd-info-text">
                  <el-row>
                    <el-col :span="8">代码：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchAddressCode || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">公司名/个人：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatcher || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">联系人：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchLinkMan || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">联系电话：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchPhone || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">州/省：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchProvince || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">城市：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchCity || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">邮编：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchZipCode || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">详细地址：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.dispatchAddress || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">追踪号：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.trackNumber || ''
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">追踪号类型：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.track1Type || ''
                    }}</el-col>
                  </el-row>
                  <el-row v-if="waybillInfo.waybill.shipAccount">
                    <el-col :span="8">打单账号：</el-col>
                    <el-col :span="16">{{
                      waybillInfo.waybill.shipAccount || ''
                    }}</el-col>
                  </el-row>
                  <template
                    v-if="
                      !(
                        waybillInfo.waybillHdSubCreates &&
                        waybillInfo.waybillHdSubCreates.length > 0
                      )
                    "
                  >
                    <el-row>
                      <el-col :span="8">打单日志：</el-col>
                      <el-col :span="16">
                        <el-popover placement="left" trigger="hover">
                          <div>
                            <div class="padding">打单日志</div>
                            <div>
                              {{ waybillInfo.waybill.sysRemark || '空' }}
                            </div>
                          </div>
                          <i slot="reference" class="el-icon-s-order text-xl" />
                        </el-popover>
                        <!-- <i v-else title="打单日志" class="el-icon-s-order text-xl" /> -->
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">获取标签</el-col>
                      <el-col :span="16">
                        <i
                          v-if="!waybillInfo.waybill.shipAccount"
                          class="el-icon-edit text-xl text-blue pointer"
                          title="录入包裹尺寸"
                          @click="enterPackageInfo"
                        />
                        <i
                          v-else-if="waybillInfo.waybill.labelStatus < 99"
                          class="el-icon-s-promotion text-xl text-blue pointer"
                          title="再次推送"
                          @click="onPush"
                        />
                        <i
                          class="el-icon-download text-xl text-blue pointer"
                          title="下载标签"
                          @click="onDownload"
                        />
                      </el-col>
                    </el-row>
                  </template>
                </div>
              </el-card>
            </el-col>
            <el-col
              v-if="waybillInfo.waybill.portOfDestinationBillStatus !== 0"
              :span="8"
            >
              <el-card class="flex-card">
                <div slot="header" class="clearfix">
                  <span class="title-icon">合单费用信息</span>
                </div>

                <TableModule
                  :table-columns="tableColumns"
                  :table-data="waybillInfo.waybillReceivePayables"
                />
                <el-row
                  v-if="
                    waybillInfo.waybillReceivePayables &&
                      waybillInfo.waybillReceivePayables.length > 0
                  "
                  class="padding bg-ghostwhite"
                >
                  <el-col :span="9">合计</el-col>
                  <el-col :span="5">{{ waybillInfo.totalCost }}</el-col>
                  <el-col :span="5">{{ waybillInfo.totalRemain }}</el-col>
                  <el-col :span="5" class="padding-left">RMB</el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>

          <div
            v-if="
              waybillInfo.packingLists && waybillInfo.packingLists.length > 0
            "
          >
            <el-row :gutter="10" class="margin-top">
              <el-col :span="8">
                <el-card class="flex-card">
                  <div slot="header" class="clearfix">
                    <span class="title-icon">发货人信息</span>
                  </div>
                  <div class="hd-info-text">
                    <el-row>
                      <el-col :span="8">发件人公司名：</el-col>
                      <el-col :span="16">{{
                        waybillInfo.waybill.senderCompany
                      }}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">联系人：</el-col>
                      <el-col :span="16">{{
                        waybillInfo.waybill.senderLinkMan
                      }}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">电话：</el-col>
                      <el-col :span="16">{{
                        waybillInfo.waybill.senderPhone
                      }}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">详细地址：</el-col>
                      <el-col :span="16">{{
                        waybillInfo.waybill.senderAdress
                      }}</el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="16">
                <el-card class="flex-card">
                  <div slot="header" class="clearfix">
                    <span class="title-icon">进口商信息</span>
                  </div>
                  <div class="hd-info-text">
                    <el-row>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">进口商公司名：</el-col>
                          <el-col :span="16">{{
                            waybillInfo.waybill.importerCompanyName
                          }}</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">进口商联系人：</el-col>
                          <el-col :span="16">{{
                            waybillInfo.waybill.importerLinkMan
                          }}</el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">进口商电话：</el-col>
                          <el-col :span="16">{{
                            waybillInfo.waybill.importerPhone
                          }}</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">进口商邮编：</el-col>
                          <el-col :span="16">{{
                            waybillInfo.waybill.importerZipCode
                          }}</el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">VAT：</el-col>
                          <el-col :span="16">{{
                            waybillInfo.waybill.vat
                          }}</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">EOTI：</el-col>
                          <el-col :span="16">{{
                            waybillInfo.waybill.eori
                          }}</el-col>
                        </el-row>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="4">进口商地址：</el-col>
                      <el-col :span="20">{{
                        waybillInfo.waybill.importerAddress
                      }}</el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <!-- 清关发票 -->
            <el-card class="margin-top">
              <div slot="header" class="clearfix">
                <span class="title-icon">清关发票</span>
              </div>
              <TableModule
                :table-columns="InvoicesTableColumns"
                :table-data="waybillInfo.liquidationInvoices"
              />
            </el-card>
            <!-- 装箱单 -->
            <el-card class="margin-top">
              <div slot="header" class="clearfix">
                <span class="title-icon">装箱单</span>
              </div>
              <TableModule
                :table-columns="packingTableColumns"
                :table-data="packingLists"
              />
            </el-card>
          </div>
          <!-- 运单信息 -->

          <el-card
            v-if="
              waybillInfo.waybillHdSubCreates &&
                waybillInfo.waybillHdSubCreates.length > 0
            "
            class="margin-top"
          >
            <div slot="header" class="clearfix">
              <span class="title-icon">运单信息</span>
            </div>

            <el-table
              class="table-box"
              :border="true"
              :data="waybillInfo.waybillHdSubCreates"
              style="width: 100%"
              size="mini"
            >
              <!-- 遍历col -->
              <ex-table-column
                v-for="column in waybillInfoColumns"
                :key="column.prop"
                :auto-fit="true"
                :fit-header="true"
                :prop="column.prop"
                :label="column.label"
              >
                <template slot-scope="scope">
                  <template v-if="column.prop === 'customerTotalPackages'">
                    <div @click="getTag(scope.row)">
                      <el-link class="text-sm">{{
                        scope.row['customerTotalPackages']
                      }}</el-link>
                    </div>
                  </template>
                  <template v-else-if="column.prop === 'purposeWarehouseType'">
                    {{
                      scope.row['purposeWarehouseType']
                        ? publicData.stockTypeMap[
                            scope.row['purposeWarehouseType']
                          ]
                        : ''
                    }}
                  </template>
                  <template v-else-if="column.prop === 'sysRemark'">
                    <el-popover placement="left" trigger="hover">
                      <div>
                        <div class="padding-sm">打单日志</div>
                        <div>{{ scope.row['sysRemark'] || '空' }}</div>
                      </div>

                      <i slot="reference" class="el-icon-s-order text-xl" />
                    </el-popover>
                  </template>
                  <template v-else>
                    {{ scope.row[column.prop] }}
                  </template>
                </template>
              </ex-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <i
                    v-if="!scope.row.shipAccount"
                    class="el-icon-edit text-xl text-blue pointer"
                    title="录入包裹尺寸"
                    @click="enterPackageInfo(scope)"
                  />
                  <i
                    v-else-if="scope.row.labelStatus < 99"
                    class="el-icon-s-promotion text-xl text-blue pointer"
                    title="再次推送"
                    @click="onPush(scope)"
                  />
                  <i
                    class="el-icon-download text-xl text-blue pointer"
                    title="下载标签"
                    @click="onDownload(scope)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 包裹信息 -->
          <el-card
            v-if="
              waybillInfo.subWaybillLists &&
                waybillInfo.subWaybillLists.length > 0
            "
            class="margin-top"
          >
            <div slot="header" class="clearfix">
              <span class="title-icon">包裹信息</span>
            </div>

            <el-table
              class="table-box"
              :border="true"
              :data="waybillInfo.subWaybillLists"
              style="width: 100%"
              size="mini"
            >
              <!-- 遍历col -->
              <ex-table-column
                v-for="column in subTableColumns"
                :key="column.prop"
                :auto-fit="true"
                :fit-header="true"
                :prop="column.prop"
                :label="column.label"
              >
                <template slot-scope="scope">
                  <template v-if="column.prop === 'labelUrl'">
                    <template
                      v-if="
                        scope.row.labelUrl &&
                          scope.row.labelUrl.indexOf('pdf') > -1
                      "
                    >
                      <el-link :href="fileUrl + scope.row.labelUrl">
                        pdf
                      </el-link>
                    </template>
                    <template v-else>
                      <el-image
                        style="width: 25px; height: 25px"
                        :src="scope.row.labelUrl"
                        :preview-src-list="[scope.row.labelUrl]"
                      >
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </template>
                  </template>
                  <template v-else>
                    {{ scope.row[column.prop] }}
                  </template>
                </template>
              </ex-table-column>
            </el-table>
          </el-card>

          <HdWaybillSubs :id="waybillId" :show-subs.sync="showSubs" />

          <el-dialog
            title="录入包裹尺寸信息"
            :visible.sync="enterPackageInfoDialog"
          >
            <el-row>
              <el-col :span="12">
                <el-form
                  ref="packageInfoForm"
                  size="mini"
                  :model="packageInfoForm"
                  :rules="packageInfoRules"
                >
                  <el-form-item label-width="90px" prop="shipAccount">
                    <div slot="label">打单账号：</div>
                    <el-select
                      v-model="packageInfoForm.shipAccount"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(label, value) in publicData.shippingAccountMap"
                        :key="value"
                        :label="label"
                        :value="value"
                      />
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12" class="text-right">
                <el-button size="mini" type="primary" @click="saveAndPrint"
                  >保存 & 获取标签</el-button
                >
              </el-col>
            </el-row>
            <el-divider />
            <el-row>
              <el-col
                v-for="(item, index) in packageInfoForm.packageList"
                :key="index"
                :span="24"
              >
                <el-form
                  ref="form"
                  size="mini"
                  :model="item"
                  :rules="packageInfoRules"
                  label-width="75px"
                >
                  <el-row>
                    <el-col :span="4">
                      <el-form-item prop="cases">
                        <div slot="label">件数：</div>
                        <el-input
                          v-model.number="item.cases"
                          autocomplete="off"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item prop="length">
                        <div slot="label">长(CM)：</div>
                        <el-input
                          v-model.number="item.length"
                          autocomplete="off"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item prop="width">
                        <div slot="label">宽(CM)：</div>
                        <el-input
                          v-model.number="item.width"
                          autocomplete="off"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item prop="height">
                        <div slot="label">高(CM)：</div>
                        <el-input
                          v-model.number="item.height"
                          autocomplete="off"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label-width="85px" prop="weight">
                        <div slot="label">重量(KG)：</div>
                        <el-input
                          v-model.number="item.weight"
                          autocomplete="off"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" class="padding-lr-sm ">
                      <i
                        class="el-icon-circle-plus-outline text-green text-xl margin-right-sm"
                        @click="plusItem(index)"
                      />
                      <i
                        v-if="packageInfoForm.packageList.length > 1"
                        class="el-icon-remove-outline text-red text-xl"
                        @click="removeItem(index)"
                      />
                    </el-col>
                  </el-row>
                </el-form>
              </el-col>
            </el-row>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="fileList" lazy>
        <FileList :waybill-id="waybillId" class="padding" />
      </el-tab-pane>
      <el-tab-pane
        :label="`${waybillInfo.waybill.waybillNo}`"
        name="fileList1"
        disabled
      />
    </el-tabs>
  </div>
</template>

<script>
import golablData from '@/utils/config'
import { uncompileStr } from '@/utils'
const ProgressBar = () => import('@/components/ProgressBar')
import TableModule from '@/components/TableModule'
import HdWaybillSubs from './components/HdWaybillSubs'
import FileList from './components/FileList'
import { mapGetters } from 'vuex'
import {
  getHdWaybillHdDetail,
  againSendExpressLabel,
  saveSubDimensAndPrint,
  exportTrackNumber,
  initHdWaybillState
} from '@/api/endpoint'
export default {
  components: {
    ProgressBar,
    TableModule,
    HdWaybillSubs,
    FileList
  },
  props: ['id'],
  data() {
    return {
      waybillId: '',
      activeName: 'first',
      width: 8,
      fileUrl: golablData.fileUrl,
      packageInfoForm: {
        shipAccount: '',
        packageList: [
          { cases: '', length: '', width: '', height: '', weight: '' }
        ]
      },
      packageInfoRules: {
        shipAccount: [
          { required: true, message: '请选择打单账号', trigger: 'change' }
        ],
        cases: [{ required: true, message: '请填写', trigger: 'blur' }],
        length: [{ required: true, message: '请填写', trigger: 'blur' }],
        width: [{ required: true, message: '请填写', trigger: 'blur' }],
        height: [{ required: true, message: '请填写', trigger: 'blur' }],
        weight: [{ required: true, message: '请填写', trigger: 'blur' }]
      },
      enterPackageInfoDialog: false,
      selectIndex: '',
      wid: '',
      showSubs: false,
      waybillInfo: {
        waybill: {}
      },
      waybillReceivePayables: [],
      progress: [],
      packingLists: [],
      tableColumns: [
        { prop: 'costNames', label: '费用名称' },
        { prop: 'totalCost', label: '金额' },
        { prop: 'remain', label: '未付' },
        { prop: 'currency', label: '币种' }
      ],
      subTableColumns: [
        { prop: 'subWaybillNo', label: '子单号' },
        { prop: 'weight', label: '重量' },
        { prop: 'length', label: '长' },
        { prop: 'width', label: '宽' },
        { prop: 'height', label: '高' },
        { prop: 'trackNumber', label: '追踪号' },
        { prop: 'trackType', label: '追踪号类型' },
        { prop: 'labelUrl', label: '标签' }
      ],
      waybillInfoColumns: [
        { prop: 'waybillNo', label: '运单号' },
        { prop: 'referenceNo', label: '参考号' },
        { prop: 'customerActualWeight', label: '实重' },
        { prop: 'customerVolume', label: '体积' },
        { prop: 'customerChargedWeight', label: '计费重' },
        { prop: 'customerTotalPackages', label: '件数' },
        { prop: 'purposeWarehouseType', label: '目的仓库类型' },
        { prop: 'dispatcher', label: '公司名/个人' },
        { prop: 'dispatchLinkMan', label: '联系人' },
        { prop: 'dispatchPhone', label: '联系电话' },
        { prop: 'dispatchProvince', label: '州/省' },
        { prop: 'dispatchCity', label: '城市' },
        { prop: 'dispatchZipCode', label: '邮编' },
        { prop: 'dispatchAddress', label: '详细地址' },
        { prop: 'sysRemark', label: '日志' }
      ],
      packingTableColumns: [
        { prop: 'startNumNo', label: '箱号' },
        { prop: 'weight', label: '单箱毛重(kg)' },
        { prop: 'LWH', label: '单箱长×宽×高(cm)' },
        { prop: 'sku', label: 'SKU' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'num', label: '个数' }
      ]
    }
  },
  computed: {
    isAir() {
      return !!(
        this.waybillInfo &&
        this.waybillInfo.waybill &&
        this.waybillInfo.waybill.waybillNo.indexOf('HDA')
      )
    },
    ...mapGetters(['publicData', 'japanLine']),
    InvoicesTableColumns() {
      let list = [
        { prop: 'declareNameEn', label: '英文品名' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'brand', label: '品牌' },
        { prop: 'material', label: '材质' },
        { prop: 'purpose', label: '用途' },
        { prop: 'customsCode', label: '海关编码' },
        { prop: 'asin', label: 'ASIN' },
        { prop: 'num', label: '数量' },
        { prop: 'purchasingPrice', label: '采购单价(RMB)' }
      ]
      const noJapList = [
        {
          prop: 'declareValue',
          label: `申报单价`
        },
        { prop: 'imgUrl', label: '图片', type: 'img' }
      ]
      const japList = [
        { prop: 'declareValue', label: 'ASIN售价' },
        { prop: 'distributionMaterialCount', label: '配送料' },
        { prop: 'productLotCount', label: '出品手数料' },
        { prop: 'imgUrl', label: '图片', type: 'img' },
        { prop: 'sellpriceScreenshot', label: '售价截图', type: 'img' },
        { prop: 'incomeScreenshot', label: '收益截图', type: 'img' }
      ]

      if (
        this.waybillInfo.waybill &&
        this.waybillInfo.waybill.inStockChannel &&
        this.japanLine.includes(
          parseInt(this.waybillInfo.waybill.inStockChannel)
        )
      ) {
        list = [...list, ...japList]
      } else {
        list = [...list, ...noJapList]
      }
      return list
    }
  },
  mounted() {
    if (this.id) {
      this.waybillId = uncompileStr(this.id)
    }
    this.init()
  },
  methods: {
    async init() {
      this.$store.dispatch('app/toggleDialog', true)
      const { data } = await getHdWaybillHdDetail({ id: this.waybillId })
      this.waybillInfo = data
      // console.log('data :>> ', data)

      if (data.waybillReceivePayables.length > 0) {
        for (const i of data.waybillReceivePayables) {
          i.costNames = this.publicData.configPayNameMap[i.costName]
        }
      }

      if (data.packingLists && data.packingLists.length > 0) {
        const arr = []

        for (const i of data.packingLists) {
          for (const j of i.packSkuList) {
            arr.push({
              startNumNo: i.startNumNo,
              weight: i.weight,
              length: i.length,
              width: i.width,
              height: i.height,
              declareNameCn: j.declareNameCn,
              num: j.num
            })
          }
        }
        this.packingLists = arr
      }

      const { data: progress } = await initHdWaybillState({
        id: this.waybillId
      })

      this.progress = progress

      this.$store.dispatch('app/toggleDialog', false)
      if (this.waybillInfo.waybill.portOfDestinationBillStatus === 0) {
        this.width = 12
      }
    },

    enterPackageInfo(scope) {
      // saveSubDimensAndPrint
      if (scope.row) {
        this.selectIndex = scope.$index
      }
      this.wid = scope.row ? scope.row.id : this.waybillId
      this.enterPackageInfoDialog = true
    },
    async onPush(scope) {
      this.$confirm('推送后请稍等一会再查看日志是否成功，是否推送？')
        .then(_ => {
          this.$store.dispatch('app/toggleDialog', true)
          againSendExpressLabel({
            id: scope.row ? scope.row.id : this.waybillId
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '已推送',
                type: 'success'
              })
            } else {
              this.$message.error(res.message)
            }
          })
          this.$store.dispatch('app/toggleDialog', false)
        })
        .catch(_ => {})
    },
    async onDownload(scope) {
      this.$store.dispatch('app/toggleDialog', true)
      const data = await exportTrackNumber({
        waybillId: scope.row ? scope.row.id : this.waybillId
      })

      if (data.path) {
        window.open(data.path)
      } else {
        let m = data.errorMesage

        if (data.errorMesage.indexOf('__') > -1) {
          m = this.$t(
            `waybill.${data.errorMesage.slice(2, data.errorMesage.length - 2)}`
          )
        }
        this.$message.error(m)
        // this.$message.error(data.errorMesage)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    getTag(row) {
      this.showSubs = true
      this.wid = row.id
    },
    plusItem(index) {
      const obj = { cases: '', length: '', width: '', height: '', weight: '' }
      this.packageInfoForm.packageList.splice(index + 1, 0, obj)
    },
    removeItem(index) {
      this.packageInfoForm.packageList.splice(index, 1)
    },

    async saveAndPrint() {
      let flag = false
      this.$refs.packageInfoForm.validate(valid => {
        if (valid) {
          flag = true
        } else {
          return false
        }
      })

      if (!flag) return

      // validate
      this.$refs.form.forEach((x, i) => {
        x.validate(valid => {
          if (valid) {
            flag = true
          } else {
            return false
          }
        })
      })
      if (!flag) return
      let cases = 0
      for (const i of this.packageInfoForm.packageList) {
        cases += parseInt(i.cases)
      }

      if (
        (this.selectIndex &&
          this.waybillInfo.waybillHdSubCreates[this.selectIndex]
            .customerTotalPackages !== cases) ||
        cases !== this.waybillInfo.waybill.customerTotalPackages
      ) {
        this.$message.error('件数不匹配')
        return
      }

      this.$store.dispatch('app/toggleDialog', true)

      const { code, data, message } = await saveSubDimensAndPrint({
        waybillId: this.wid || this.waybillId,
        shipAccount: this.packageInfoForm.shipAccount,
        dimensions: this.packageInfoForm.packageList
      })

      if (code !== 200) {
        // this.$message.error(message)
        let m = message
        if (message.indexOf('__') > -1) {
          m = this.$t(`waybill.${message.slice(2, message.length - 2)}`)
        }
        this.$message.error(m)
        this.$store.dispatch('app/toggleDialog', false)
        return
      }

      ;(this.packageInfoForm = {
        shipAccount: '',
        packageList: [
          { cases: '', length: '', width: '', height: '', weight: '' }
        ]
      }),
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.hd-info-text {
  line-height: 24px;
}
.flex-card {
  height: 100%;
}

.bg-ghostwhite {
  background-color: ghostwhite;
}
</style>
